<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main class="printMain" ref="printMain">
            <div>
                <div style="height:32px;line-height: 32px;font-size: 24px;font-weight: bold">品名: {{goods_name}} 总匹数: {{total_count_all}}</div>
                <div v-for="item in data" :key="item.id">
                    <!-- <div style="border: 1px solid;border-bottom: none;height:32px;line-height: 32px">花型: {{item.flower}}</div> -->
                    <table border="1" style="border-collapse: collapse; width: 100%;" >
                        <thead>
                            <tr style="text-align: left;">
                                <th colspan="12" style="padding: 10px 0">花型: {{item.flower}} 匹数: {{item.total_count}}</th>
                            </tr>
                            <tr style="height:32px;line-height: 32px;background: #e6e6e6;">
                                <th>颜色</th>
                                <th v-for="num in 10" :key="num">{{num}}</th>
                                <th>合计</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for="(color,colorIndex) in item.color_data" :key="color.colorIndex">
                                <template v-if="color.meter_data && color.meter_data.length > 0">
                                    <tr style="height:32px;line-height: 32px" v-for="row in Math.ceil(color.meter_data.length / 10)" :key="`row-${row}`" :class="['color-row', colorIndex % 2 === 0 ? 'odd-group' : 'even-group']">
                                        <td style="width: 10%" v-if="row === 1">{{color.color_name}}</td>
                                        <td style="width: 10%" v-else></td>
                                        <td style="width: 8%" v-for="col in 10" :key="`col-${col}`">
                                            {{ color.meter_data[(row-1)*10 + (col-1)]?.meters || '' }}
                                        </td>
                                        <td style="width: 10%" v-if="row === 1" :rowspan="Math.ceil(color.number / 10)">{{color.meter_count}}</td>
                                    </tr>
                                </template>
                                <tr style="height:32px;line-height: 32px" v-else :class="colorIndex % 2 === 0 ? 'odd-group' : 'even-group'">
                                    <td>{{color.color_name}}</td>
                                    <td colspan="10">暂无数据</td>
                                </tr>
                            </template>
                        </tbody>
                        <tr style="height:32px;line-height: 32px">
                            <td colspan="11">合计</td>
                            <td >{{item.meter_count_all}}</td>
                        </tr>
                    </table>
                </div>
                <table border="1" style="border-collapse: collapse; width: 100%;">
                    <tr style="height:32px;line-height: 32px">
                        <td style="width: 90%">总合计</td>
                        <td >{{meter_count}}</td>
                    </tr>
                </table>
            </div>
        </el-main>
        <template #footer>
			<el-button @click="visible = false">取 消</el-button>
        </template>
    </el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
    emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增',
                edit: '码单',
                show: '查看',
            },
            visible: false,
            isSaveing: false,
            data: [],
            goods_name: "",
            meter_count: "",
            total_count_all: "",
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        async setData(data) {
            var res = await this.$API.business.purchase.house.get_all_meters.post({id: data.id});
            console.log(res);
            this.data = res.data.order_detail
            this.goods_name = data.goods_name
            let count = 0;
            res.data.order_detail.map(item=>{
                count = count + item.meter_count_all
            })
            this.meter_count = count
            this.total_count_all = res.data.total_count_all
        },
        print(){
            print(this.$refs.printMain)
            setTimeout(()=>{
                this.visible = false
            },500)
        },
    }
}
</script>

<style lang="scss" scoped>
.printMain{
    padding: 30px;
}
td{
    text-align: center;
}
table{
    tbody{
        font-size: 13px;
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
} 
.color-row {
   transition: background-color 0.3s;   
}
   
/* 交替颜色组 */   
.even-group {
   background-color: #dae9f8; /* 浅灰色 */   
}   
.odd-group {
   background-color: #ffffff; /* 白色 */   
}
</style>
